<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <script src="../js/jquery.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <!--    <link rel="stylesheet" type="text/css" href="https://blog.huangwx.cn/css/sweetalert.css">-->
    <!--    <script type="text/javascript" src="https://blog.huangwx.cn/js/sweetalert-dev.js"></script>-->
    <!--    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">-->
    <!--    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>-->
    <!--    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>-->
    <style type="text/css">
        table {
            width: 100%;
            margin-top: 20px
        }



        .modal-mid {
            width: 700px;
        }
    </style>
</head>
<body style="background-color:white">
<div class="container-fluid">
    <div class="row">
        <div class="col-md-1">
            <!--           <button type="button" class="btn btn-warning" id="tj">添加</button>-->
            <button id="tj" class="btn btn-info" data-toggle="modal" data-target="#addmyModal1">
                添加
            </button>
            <div class="modal fade" id="addmyModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                 aria-hidden="true">
                <div class="modal-dialog modal-mid">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="myModalLabel">添加小区信息</h4>
                        </div>
                        <table>
                            <div class="modal-body">
                                <div class="container-fluid">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="input-group">
                                                <div class="input-group-addon">小区名称</div>
                                                <input id="xqmc" class="form-control" placeholder="请输入小区名称"/>
                                            </div>
                                            <br>
                                            <div class="input-group">
                                                <div class="input-group-addon">所在地区</div>
                                                <input id="szdq" class="form-control" placeholder="请输入所在地区"/>
                                            </div>
                                            <br>
                                            <div class="input-group">
                                                <div class="input-group-addon">详细地址</div>
                                                <input id="xxdz" class="form-control" placeholder="请输入详细地址"/>
                                            </div>
                                            <br>
                                            <div class="input-group">
                                                <div class="input-group-addon">客服电话</div>
                                                <input type="number" id="kfdh" class="form-control" placeholder="请输入客服电话"/>
                                            </div>
                                            <br>

                                            <div class="input-group">
                                                <div class="input-group-addon">负责人</div>
                                                <input id="fzr" class="form-control" placeholder="请输入负责人"/>
                                            </div>
                                            <br>
                                            <div class="input-group">
                                                <div class="input-group-addon">联系人电话</div>
                                                <input type="number" id="lxrdh" class="form-control" placeholder="请输入联系电话"/>
                                            </div>
                                            <br>
                                            <div class="input-group">
                                                <div class="input-group-addon">小区背景</div>
                                                <input id="tp" name="file" type="file"  class="form-control"/>
                                            </div>
                                            <br>
                                            <div class="input-group">
                                                <div class="input-group-addon">备注</div>
                                                <input id="bz" class="form-control" placeholder="请输入备注"/>
                                            </div>
                                        </div>
                                            <div class="input-group">
                                                <div class="input-group-addon">占地面积</div>
                                                <input type="number" id="zdmj" class="form-control" placeholder="请输入占地面积"/>
                                            </div>
                                            <br>
                                            <div class="input-group">
                                                <div class="input-group-addon">建筑面积</div>
                                                <input type="number" id="jzmj" class="form-control" placeholder="请输入建筑面积"/>
                                            </div>
                                            <br>
                                            <div class="input-group">
                                                <div class="input-group-addon">公共场所面积</div>
                                                <input type="number" id="ggcsmj" class="form-control" placeholder="请输入公共场所"/>
                                            </div>
                                            <br>
                                            <div class="input-group">
                                                <div class="input-group-addon">绿化面积</div>
                                                <input type="number" id="lhmj" class="form-control" placeholder="请输入绿化面积"/>
                                            </div>
                                            <br>
                                            <div class="input-group">
                                                <div class="input-group-addon">设计车位面积</div>
                                                <input type="number" id="sjcwmj" class="form-control" placeholder="请输入设计车位"/>
                                            </div>
                                            <br>
                                            <div class="input-group">
                                                <div class="input-group-addon">车库面积</div>
                                                <input type="number" id="ckmj" class="form-control" placeholder="请输入车位面积"/>
                                            </div>
                                            <br>
                                            <div class="input-group">
                                                <div class="input-group-addon">车位数</div>
                                                <input type="number" id="cws" class="form-control" placeholder="请输入车位数"/>
                                            </div>
                                            <br>

                                        </div>
                                    </div>
                                </div>
                        </table>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button id="button02" type="button" class="btn btn-primary">提交</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-lg-offset-7 input-group">
            <input type="text" class="form-control" id="inp">
            <span class="input-group-btn">
          <button class="btn btn-info" type="button" id="cx">查询</button>
             </span>
        </div>
    </div>
    <div class="row">
        <div class="col-md-13">
            <table class="table table-bordered" id="xqxx"  style="color: black">
                <tr>
                    <td>
                        <input type="checkbox" id="checkbox1">
                    </td>
                    <td>小区编号</td>
                    <td>小区名称</td>
                    <td>所在地区</td>
                    <td>详细地址</td>
                    <td>客服电话</td>
                    <td>负责人</td>
                    <td>联系人电话</td>
                    <td>小区背景</td>
                    <td>占地面积</td>
                    <td>建筑面积</td>
                    <td>公共场所面积</td>
                    <td>绿化面积</td>
                    <td>设计车位面积</td>
                    <td>车库面积</td>
                    <td>车位数</td>
                    <td>备注</td>
                    <td>操作</td>
                </tr>
            </table>
        </div>
    </div>
</div>
<input id="cc" hidden>
<script type="text/javascript">
    /**已完成
     * 点击查询
     */
    $("#cx").on("click", function () {
        let inptext = $("#inp").val();
        if (inptext == "") {
            window.location.reload()
            return;
        }
        let inp = $("#inp").val();
        $.ajax({
            url: "lgetListxqgl",
            type: "get",
            dataType: "json",
            data: {inp: inp},
            success: function (data) {
                console.log(data);
                if (data.length == 0) {
                    alert("小区名称不存在")
                    return
                }
                $("#xqxx tr:not(:first)").remove()
                for (let i = 0; i < data.length; i++) {
                    let xx = data[i];
                    add(xx)
                }//
            }
        });
    });
    /**已完成
     * 显示字段已完成
     */
    $.ajax({
        url: "getall",
        type: "get",
        dataType: "json",
        success: function (data) {
            console.log(data);
            for (let i = 0; i < data.length; i++) {
                let xx = data[i];
                add(xx)
            }
        }

    });

    /**
     * 加载主键并赋值
     */
    function add(xx) {
        let newTr = document.createElement("tr");
        let t1 = document.createElement("td")
        $(t1).html("<input type=\"checkbox\" id=\"checkbox1\">");
        let t2 = document.createElement("td");
        $(t2).html(xx.vid);
        let t3 = document.createElement("td");
        $(t3).html(xx.vname);
        let t4 = document.createElement("td");
        $(t4).html(xx.varea);
        let t5 = document.createElement("td");
        $(t5).html(xx.vaddress);
        let t6 = document.createElement("td");
        $(t6).html(xx.vcustomer);
        let t7 = document.createElement("td");
        $(t7).html(xx.vleading);
        let t8 = document.createElement("td");
        $(t8).html(xx.vlinkman);
        let t9 = document.createElement("td");
        $(t9).html("<img  style='width: 60px' src='/img/" + xx.vbackdrop + "' >");
        let t10 = document.createElement("td");
        $(t10).html(xx.vcover);
        let t11 = document.createElement("td");
        $(t11).html(xx.vbuilding);
        let t12 = document.createElement("td");
        $(t12).html(xx.vplace);
        let t13 = document.createElement("td");
        $(t13).html(xx.vtrees);
        let t14 = document.createElement("td");
        $(t14).html(xx.vspace);
        let t15 = document.createElement("td");
        $(t15).html(xx.vgarage);
        let t16 = document.createElement("td");
        $(t16).html(xx.vdigit);
        let t17 = document.createElement("td");
        $(t17).html(xx.vremark);
        let t18 = document.createElement("td");
        let b1 = document.createElement("button")
        $(b1).attr("class", "glyphicon glyphicon-pencil btn btn-primary")
        $(b1).attr("data-toggle", "modal")
        $(b1).attr("data-target", "#addmyModal1")
        $(b1).on("click", function () {
            $("#myModalLabel").html("修改小区信息")
            $("#cc").val(xx.vid)
            $("#xqmc").val(xx.vname)
            $("#szdq").val(xx.varea)
            $("#xxdz").val(xx.vaddress)
            $("#kfdh").val(xx.vcustomer)
            $("#fzr").val(xx.vleading)
            $("#lxrdh").val(xx.vlinkman)
            // $("#tp").val(xx.vbackdrop)
            $("#zdmj").val(xx.vcover)
            $("#jzmj").val(xx.vbuilding)
            $("#ggcsmj").val(xx.vplace)
            $("#lhmj").val(xx.vtrees)
            $("#sjcwmj").val(xx.vspace)
            $("#ckmj").val(xx.vgarage)
            $("#cws").val(xx.vdigit)
            $("#bz").val(xx.vremark)
        });
        /**
         * 删除
         * @type {HTMLButtonElement}
         */
        let b2 = document.createElement("button")
        $(b2).on("click", function () {
            let r = confirm("确认删除吗？");
            if (r == true) {
                $.ajax({
                    url: "getsc",
                    type: "get",
                    data: {vid: xx.vid},
                    dataType: "json",
                    success: function (data) {
                       if(data){
                           alert("删除成功")
                       }else{
                           alert("有住房不能删除")
                       }
                    }
                });
                window.location.reload();
            }
        });




            $(b2).attr("class", "glyphicon glyphicon-trash  btn btn-danger")

            $(t18).append(b1, b2)
            $(newTr).append(t1, t2, t3, t4, t5, t6, t7, t8, t9, t10, t11, t12, t13, t14, t15, t16, t17, t18);
            $("#xqxx").append(newTr);
        }


    /**
     * 模态框添加修改
     */
    $("#button02").on("click", function () {
        let i = $("#cc").val()
        let url;
        if (i == 0) {
            url = "getTjxx"
        } else {
            url = "getXgxq"
        }

        let vid = $("#cc").val();
        let xqmc = $("#xqmc").val();
        let szdq = $("#szdq").val();
        let xxdz = $("#xxdz").val();
        let kfdh = $("#kfdh").val();
        let fzr = $("#fzr").val();
        let lxrdh = $("#lxrdh").val();
        // let xqbj = $("#xqbj").val();
        let zdmj = $("#zdmj").val();
        let jzmj = $("#jzmj").val();
        let ggcsmj = $("#ggcsmj").val();
        let lhmj = $("#lhmj").val();
        let sjcwmj = $("#sjcwmj").val();
        let ckmj = $("#ckmj").val();
        let cws = $("#cws").val();
        let bz = $("#bz").val();

        console.log(xqmc)
        console.log(szdq)
        let formData = new FormData()
        formData.append("tp", $("#tp")[0].files[0]);
         formData.append("vid",vid)
        formData.append("xqmc",xqmc)
        formData.append("szdq",szdq)
        formData.append("xxdz",xxdz)
        formData.append("kfdh",kfdh)
        formData.append("fzr",fzr)
        formData.append("lxrdh",lxrdh)
        formData.append("zdmj",zdmj)
        formData.append("jzmj",jzmj)
        formData.append("ggcsmj",ggcsmj)
        formData.append("lhmj",lhmj)
        formData.append("sjcwmj",sjcwmj)
        formData.append("ckmj",ckmj)
        formData.append("cws",cws)
        formData.append("bz",bz)

        console.log($("#tp")[0].files[0])
        $.ajax({
            url:url,
            type: "post",
            dataType:"json",
            contentType: false, //必须
            processData: false, //必须
            data:formData,
            success: function (data) {
                console.log(data);
                if (data == 1) {
                    alert("成功")
                    window.location.reload();
                } else {
                    alert("失败")
                }
                ;
            }
        })

    });

    /**
     * 获取json数据对象
     */
    function chuanrujson() {
        let vid = $("#cc").val();
        let xqmc = $("#xqmc").val();
        let szdq = $("#szdq").val();
        let xxdz = $("#xxdz").val();
        let kfdh = $("#kfdh").val();
        let fzr = $("#fzr").val();
        let lxrdh = $("#lxrdh").val();
        let xqbj = $("#xqbj").val();
        let zdmj = $("#zdmj").val();
        let jzmj = $("#jzmj").val();
        let ggcsmj = $("#ggcsmj").val();
        let lhmj = $("#lhmj").val();
        let sjcwmj = $("#sjcwmj").val();
        let ckmj = $("#ckmj").val();
        let cws = $("#cws").val();
        let bz = $("#bz").val();
        let obj = {
            "vid": vid,
            "vname": xqmc,
            "varea": szdq,
            "vaddress": xxdz,
            "vcustomer": kfdh,
            "vleading": fzr,
            "vlinkman": lxrdh,
            "mf": xqbj,
            "vcover": zdmj,
            "vbuilding": jzmj,
            "vplace": ggcsmj,
            "vtrees": lhmj,
            "vspace": sjcwmj,
            "vgarage": ckmj,
            "vdigit": cws,
            "vremark": bz
        }
        return obj;
    };
    /**
     * 改表标题
     */
    $("#tj").on("click", function () {
        $("#cc").val("")
        $("#xqmc").val("")
        $("#szdq").val("")
        $("#xxdz").val("")
        $("#kfdh").val("")
        $("#fzr").val("")
        $("#lxrdh").val("")
        // $("#tp").val(xx.vbackdrop)
        $("#zdmj").val("")
        $("#jzmj").val("")
        $("#ggcsmj").val("")
        $("#lhmj").val("")
        $("#sjcwmj").val("")
        $("#ckmj").val("")
        $("#cws").val("")
        $("#bz").val("")
        $("#myModalLabel").html("添加小区信息")
        $("#cc").val(0)
    });


</script>
</body>
</html>

